@using CodePen.Web.Options
@using Microsoft.Extensions.Options
@inject IOptionsMonitor<SystemInfo> systemInfo
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>土味情话集</title>
    <link href="~/elementui/index.min.css" rel="stylesheet" />
    <link href="~/css/site.css" rel="stylesheet" />
</head>
<body>
    <div id="app">
        <div class="app-container">
            <!-- 头部区域 -->
            <header class="header-section">
                <h1 class="main-title">土味情话集</h1>
                <p class="subtitle">这里收集了各种有趣、甜蜜又有点"土"的情话，无论是用来表达爱意还是博得一笑，总有一句适合你。</p>
            </header>

            <!-- 筛选区域 -->
            <section class="filter-section">
                <el-input placeholder="搜索情话..."
                          v-model="searchQuery"
                          clearable
                          style="width: 300px">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>

                <el-radio-group v-model="filterType" @@change="filterQuotes" :size="size" class="skincolor">
                    <el-radio-button label="all" class="skincolor">全部</el-radio-button>
                    <el-radio-button v-for="category in categories" :key="category.id" :label="category.code" :size="size" class="skincolor">
                        {{ category.name }}
                    </el-radio-button>
                </el-radio-group>

                <el-button type="primary" @@click="navigateToContentPage" icon="el-icon-plus" :size="size" class="skincolor">添加情话</el-button>
            </section>

            <!-- 情话展示区域 -->
            <main>
                <div class="quotes-grid">
                    <el-card v-for="(quote, index) in filteredQuotes"
                             :key="quote.id || index"
                             class="quote-card"
                             :body-style="{ padding: '20px', height: 'auto' }">
                        <div class="quote-content">
                            {{ quote.content }}
                        </div>
                        <div class="card-footer">
                            <el-tag :type="getTagType(quote.categoryName)"
                                    size="small">
                                {{ quote.categoryName }}
                            </el-tag>
                            <div>
                                <el-button type="text"
                                           icon="el-icon-share"
                                           @@click ="shareQuote(quote)">
                                </el-button>

                            </div>
                        </div>
                    </el-card>
                </div>

                <!-- 操作按钮区域 -->
                <div class="action-section">
                    <el-button type="primary" @@click ="getRandomQuote" icon="el-icon-refresh" class="skincolor">
                        随机新情话
                    </el-button>
                </div>
            </main>

            <!-- 页脚区域 -->
            <footer class="footer-section">
                <p>用心说的情话，再土也动人 <span class="heart">❤</span></p>
            </footer>
            
            <!-- 返回顶部按钮 -->
            <transition name="fade">
                <div v-show="isShowBackToTop" class="back-to-top" @@click="backToTop">
                    <el-tooltip content="返回顶部" placement="left">
                        <el-button type="primary" size="small" icon="el-icon-arrow-up" circle class="skincolor">
                        </el-button>
                    </el-tooltip>
                </div>
            </transition>
        </div>
    </div>
    <script src="~/vue/vue.js"></script>
    <script src="~/elementui/index.i18n.js"></script>
    <script src="~/elementui/index.lang.js"></script>
    <script src="~/elementui/index.min.js"></script>
    <script src="~/elementui/lang/zhCN.js"></script>
    <script src="~/elementui/lang/en.js"></script>
    <script src="~/elementui/lang/fr.js"></script>
    <script src="~/elementui/lang/ja.js"></script>
    <script src="~/elementui/lang/vi.js"></script>
    <script src="~/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "";</script>
    <script src="~/vue/axios.min.min.js"></script>
    <script src="~/vue/vue-i18n.min.js"></script>
     
    <script>
        
        new Vue({
            el: '#app', 
            data() {
                return {
                    size:'mini',
                    searchQuery: '',
                    filterType: 'all',
                    contentList: [], // 从接口获取的数据
                    categories: [], // 从接口获取的分类数据
                    customQuotes: [],
                    currentPage: 3, // 当前页码
                    pageSize: 9, // 每页数据量
                    totalPages: 0, // 总页数
                    scrollTop: 0 // 滚动位置
                };
            },
            computed: {
                filteredQuotes() {
                    // 合并从接口获取的数据和自定义添加的数据
                    let result = [
                        ...this.contentList.map(item => ({
                            id: item.id,
                            content: item.content,
                            categoryName: item.category?.name || '未分类',
                            custom: false
                        })),
                        ...this.customQuotes
                    ];

                    // 根据搜索词过滤
                    if (this.searchQuery) {
                        result = result.filter(quote =>
                            quote.content.toLowerCase().includes(this.searchQuery.toLowerCase())
                        );
                    }

                    // 根据类型过滤
                    if (this.filterType !== 'all') { console.error('获取数据时出错:', this.filterType);
                        // 查找选中的分类名称
                        const selectedCategory = this.categories.find(cat => cat.code === this.filterType);
                        if (selectedCategory) {
                            result = result.filter(quote => quote.categoryName === selectedCategory.name);
                        }
                    }

                    return result;
                },
                // 控制返回顶部按钮的显示状态
                isShowBackToTop() {
                    return this.scrollTop > 300; // 滚动超过300px时显示
                }
            },
            methods: {
                // 获取分类对应的标签类型
                getTagType(type) {
                    const typeMap = {
                        '谐音梗': 'warning',
                        '甜蜜直白': 'success',
                        '英文情话': 'danger'
                    };
                    return typeMap[type] || 'info';
                },
                
                // 从content/allpages接口获取数据
                async fetchContentData() {
                    try {
                        // 使用已配置好的axios实例发起请求
                        const data = await this.$http.post('/content/allpages', { 
                            pageNo: 1, 
                            pageSize: 18 // 获取较多数据
                        });
                        
                        // axios拦截器已经处理了成功和错误的情况，这里直接使用返回的数据
                        this.contentList = data.rows || [];
                    } catch (error) {
                        // 错误已经在axios拦截器中处理，这里可以进行额外的错误处理
                        console.error('获取数据时出错:', error);
                    }
                },
                
                // 从category/list接口获取分类数据
                async fetchCategoryData() {
                    try {
                        // 使用已配置好的axios实例发起请求
                        const data = await this.$http.post('/category/list', {});
                        
                        // axios拦截器已经处理了成功和错误的情况，这里直接使用返回的数据
                        this.categories = data.rows || [];
                    } catch (error) {
                        // 错误已经在axios拦截器中处理，这里可以进行额外的错误处理
                        console.error('获取分类数据时出错:', error);
                    }
                },
                
                async getRandomQuote() {
                    try {
                        // 检查是否已经获取了所有页面的数据
                        if (this.totalPages > 0 && this.currentPage > this.totalPages) {
                            this.$message({
                                message: '已经获取了所有数据',
                                type: 'warning'
                            });
                            return;
                        }

                        // 使用已配置好的axios实例发起请求
                        const data = await this.$http.post('/content/allpages', {
                            pageNo: this.currentPage, 
                            pageSize: this.pageSize
                        });
                        
                        // 直接使用axios拦截器处理后的数据
                        const rows = data.rows || [];
                        
                        // 更新总页数
                        this.totalPages = Math.ceil(data.total / this.pageSize);
                        
                        if (rows.length > 0) {
                            // 将当前页的所有数据转换为quote对象并添加到customQuotes数组
                            const newQuotes = rows.map(item => ({
                                content: item.content,
                                categoryName: item.category?.name || '未分类',
                                custom: true
                            }));
                            
                            this.customQuotes.push(...newQuotes);
                            
                            // 页码递增，准备下次获取下一页
                            this.currentPage++;

                            this.$message({
                                message: `成功添加${rows.length}条新情话！`,
                                type: 'success'
                            });
                            
                            // 手动更新滚动位置，确保返回顶部按钮正确显示
                            this.$nextTick(() => {
                                // 滚动到列表底部，让用户能看到新添加的数据
                                const quotesGrid = document.querySelector('.quotes-grid');
                                if (quotesGrid) {
                                    quotesGrid.scrollIntoView({ behavior: 'smooth', block: 'end' });
                                }
                                // 更新滚动位置状态
                                this.handleScroll();
                            });
                        } else {
                            this.$message.warning('当前页没有数据');
                            // 页码递增，避免死循环
                            this.currentPage++;
                        }
                    } catch (error) {
                        // 错误已经在axios拦截器中处理，这里可以进行额外的错误处理
                        console.error('获取新情话时出错:', error);
                    }
                },
                
                filterQuotes() {
                    // 类型过滤已在计算属性中处理
                },
                
                navigateToContentPage() {
                    window.location.href = '/manage';
                },
                

                
                shareQuote(quote) {
                    // 创建一个临时的textarea元素
                    const textarea = document.createElement('textarea');
                    // 设置要复制的内容
                    textarea.value = quote.content;
                    // 将元素添加到DOM中
                    document.body.appendChild(textarea);
                    // 选中内容
                    textarea.select();
                    textarea.setSelectionRange(0, 99999); // 兼容移动设备
                    
                    try {
                        // 执行复制命令
                        document.execCommand('copy');
                        // 显示成功提示
                        this.$message({
                            type: 'success',
                            message: `已复制到剪贴板: ${quote.content.substring(0, 20)}...`
                        });
                    } catch (err) {
                        // 显示失败提示
                        this.$message({
                            type: 'error',
                            message: '复制失败，请手动复制'
                        });
                    } finally {
                        // 移除临时元素
                        document.body.removeChild(textarea);
                    }
                },
                
                // 返回顶部方法
                backToTop() {
                    // 使用Element UI的滚动动画
                    this.$el.scrollIntoView({ behavior: 'smooth' });
                },
                
                // 处理滚动事件
                handleScroll() {
                    this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                }
            },
            mounted() {
                Promise.all([
                    this.fetchContentData(),
                    this.fetchCategoryData()
                ]).then(() => {
                    this.$message({
                        message: '欢迎来到土味情话集！',
                        type: 'success',
                        duration: 2000
                    });
                }).catch(() => {
                    this.$message({
                        message: '数据加载完成，可能部分数据获取失败',
                        type: 'warning',
                        duration: 2000
                    });
                });
                window.addEventListener('scroll', this.handleScroll);
                this.handleScroll();
            },
            
            beforeDestroy() {
                window.removeEventListener('scroll', this.handleScroll);
            }
        });
    </script>
    

    
    <style>
        .skincolor {
             background-color:@systemInfo.CurrentValue.SkinColor !important;
             border-color:@systemInfo.CurrentValue.SkinColor !important
        }
        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 0.3s;
        }
        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }
        .back-to-top {
            position: fixed;
            bottom: 80px;
            right: 80px;
            z-index: 1000;
            cursor: pointer;
        }
    </style>
</body>
</html>